/***********************************************/
/* WORKFLOW DASHBOARD **************************/
/***********************************************/
#workflowComponent {
  .workflow-dashboard-engine {

    @include _button(".button-preview", "ACTIONBAR---SECONDARY", "remove-icons");
    @include _button(".button-incontext-preview", "ACTIONBAR---SECONDARY", "remove-icons");
    @include _button(".button-details", "ACTIONBAR---SUGGESTED", "remove-icons");

    width: calc(100% - 56px) !important;
    height: 100% !important;
    left: 56px !important;
    top: 0 !important;

    .x-tree3-node-text.x-tree3-node-text-widget,
    .x-grid3-row-selected .x-tree3-node-text.x-tree3-node-text-widget {
      color: _color("primary", a) !important;
      position: relative !important;
      top: 0 !important;
      pointer-events: all;
    }

    .x-tree3-node-check {
      display: none !important;
    }

    .indigo-modal-mask {
      display: none;
    }

    background: _color("secondary", a) !important;

    .x-panel-toolbar .x-tool-restore {
      display: none;
    }

    .x-panel-header {
      height: 85px !important;
      line-height: 85px;
      top: 0;
      background-color: _color("white");
      box-shadow: 0 4px 4px rgba(59, 61, 64, 0.3);
      border: none !important;
      padding: 10px;
      width: 100% !important;

      .x-panel-toolbar > table {
        pointer-events: all;
      }

      .x-panel-header-text {
        position: relative;
        height: 25px;
        left: 24px;
        top: calc(50% - 25px / 2);
        font-style: normal;
        font-weight: 300;
        font-size: 25px;
        line-height: 58px;
        display: flex;
        align-items: center;

        /* Text Secondary */

        color: _color("primary", normal);
      }

      > .x-component:first-child {
        margin-top: 22px;
        margin-right: 16px;
      }

    }

    .x-panel-bwrap {
      background: _color("secondary");
      position: relative;
      top: 10px;
      padding: 2.5% !important;
      width: 100% !important;
    }

    .x-grid3 {

      .x-grid3-body {
        .x-grid-empty {
          padding: 3px;

          &::before {
            content: _dictionary("empty");
            @include text(13px, _color("primary"), _weight("light"));
          }
        }
      }

      .x-grid3-viewport {
        width: 100% !important;
        display: flex;
        flex-direction: column;
      }

      .x-grid3-header {
        background: transparent;
        color: _color("black", d) !important;
        text-transform: uppercase;

        .x-grid3-header-inner {
          width: calc(100%) !important;
        }

        .x-grid3-hh {
          margin: 2px 0 12px;
          width: calc(100%) !important;

          > table {
            padding: 4px 0;
            width: calc(100%) !important;

            > tbody > tr {
              display: flex;
              flex-direction: row;
              width: 100% !important;

              .x-grid3-header .x-component {
                left: unset !important;
                overflow: hidden;
              }

              .x-grid3-header:first-child {
                flex-basis: 25% !important;
                flex-grow: 4;
                width: unset !important;
                display: block !important;

                > div {
                  width: 100% !important;
                }
              }

              .x-grid3-header:nth-child(2) {
                flex-basis: 32px !important;
                flex-grow: 0 !important;
                width: unset !important;
                display: block !important;

                > div {
                  width: 32px !important;
                }
              }

              .x-grid3-header:nth-child(3) {
                flex-basis: 150px !important;
                flex-grow: 1;
                width: unset !important;
                display: block !important;

                > div {
                  width: 150px !important;
                }
              }

              .x-grid3-header:nth-child(4) {
                flex-basis: 25% !important;
                flex-grow: 2;
                width: unset !important;
                display: block !important;
              }

              .x-grid3-header:nth-child(5) {
                flex-basis: 150px !important;
                flex-grow: 0;
                width: unset !important;
                display: block !important;
              }

              .x-grid3-header:nth-child(6) {
                flex-basis: 150px !important;
                flex-grow: 0;
                width: unset !important;
                display: block !important;
              }

              .x-grid3-header:nth-child(7) {
                flex-basis: 80px !important;
                flex-grow: 0;
                width: unset !important;
                display: block !important;
              }

              .x-grid3-header:nth-child(8) {
                flex-basis: 150px !important;
                flex-grow: 0;
                width: unset !important;
                display: block !important;
              }
            }

            .x-grid3-hd.x-grid3-cell {
              border-color: transparent !important;

              span,
              span div {
                font-weight: 800;
              }
            }
          }
        }
      }

      td.x-grid3-hd-over .x-grid3-hd-inner,
      td.x-grid3-hd-menu-open .x-grid3-hd-inner {
        background: _color("primary", d) !important;
      }

      .x-grid3-header-inner .x-grid3-hh > table > tbody td div .x-grid3-hd-btn {
        background: url(_icon("arrowDown", "grey")) no-repeat center center !important; /* OPTIMISE URL ::: css/app/workflow/_workflow-dashboard.scss ::: 1 */
        width: 23px;
        background-size: 13px !important;
        opacity: 1.0;
      }

      .x-grid3-scroller {
        width: 100% !important;
        display: table-cell;
        height: 100% !important;

        .x-grid3-body {
          width: calc(100%) !important;
        }
      }

      .x-grid3-row.x-grid3-row-selected {
        background: inherit !important;
        color: inherit !important;

        .x-grid3-td-displayName {
          padding-right: 0 !important;
        }

      }

      .x-grid3-row {
        color: _color("primary", a) !important;
        box-sizing: border-box;
        margin-bottom: 1px;
        width: 100% !important;
        height: 38px !important;
      }

      .x-grid3-row-table {
        width: 100% !important;
        height: 38px !important;

        > tbody > tr {
          display: flex;
          flex-direction: row;
        }

        .x-grid3-col {
          height: 38px !important;
          padding: 0 3px 0 5px !important;
        }

        .x-grid3-col:first-child {
          flex-basis: 25% !important;
          flex-grow: 4;
          width: unset !important;
          display: block !important;
          padding: 0 3px 0 0 !important;

          > div {
            width: 100% !important;
          }
        }

        .x-grid3-col:nth-child(2) {
          flex-basis: 32px !important;
          flex-grow: 0 !important;
          width: unset !important;
          display: block !important;

          > div {
            width: 32px !important;
            display: flex;
            align-items: flex-start;
            justify-content: center;
          }
        }

        .x-grid3-col:nth-child(3) {
          flex-basis: 150px !important;
          flex-grow: 1;
          width: unset !important;
          display: block !important;

          > div {
            width: 150px !important;
          }
        }

        .x-grid3-col:nth-child(4) {
          flex-basis: 25% !important;
          flex-grow: 2;
          width: unset !important;
          display: block !important;
        }

        .x-grid3-col:nth-child(5) {
          flex-basis: 150px !important;
          flex-grow: 0;
          width: unset !important;
          display: block !important;
        }

        .x-grid3-col:nth-child(6) {
          flex-basis: 150px !important;
          flex-grow: 0;
          width: unset !important;
          display: block !important;
        }

        .x-grid3-col:nth-child(7) {
          flex-basis: 80px !important;
          flex-grow: 0;
          width: unset !important;
          display: block !important;
        }

        .x-grid3-col:nth-child(8) {
          flex-basis: 150px !important;
          flex-grow: 0;
          width: unset !important;
          display: block !important;
        }

        .x-grid3-cell .x-grid3-cell-inner {
          white-space: pre-wrap !important;
          line-height: 14px !important;

          .x-tree3-node {
            height: 38px !important;
            width: 100% !important;

            .x-tree3-el {
              height: 38px !important;
              width: 100% !important;

              > table {
                height: 38px !important;
                width: 100% !important;

                > tbody {
                  height: 38px !important;
                  width: 100% !important;

                  > tr {
                    height: 38px !important;
                    width: 100% !important;

                    > td {
                      display: none !important;
                      height: 38px !important;
                      width: 0 !important;
                    }

                    > td:nth-child(3) {
                      display: table-cell !important;
                      width: 32px !important;
                    }

                    > td:last-child {
                      display: table-cell !important;
                      width: auto !important;
                      padding: 0 !important;
                      vertical-align: top !important;
                    }

                    .x-btn-small {
                      height: 38px !important;
                      width: 100% !important;

                    }
                  }
                }
              }
            }
          }

          .x-toolbar-ct {
            height: 38px !important;
          }
        }

        .x-grid3-cell .x-grid3-cell-inner label {
          color: inherit;
          text-overflow: ellipsis;
          width: 100% !important;
          display: block;
          overflow: hidden;
          line-height: 18px !important;
          height: 38px !important;
          padding-top: 1px !important;
          padding-bottom: 1px !important;
          white-space: pre-wrap !important;
        }

      }

      .x-grid3 .x-grid3-row-table > tbody {
        width: 100% !important;
        height: 38px !important;
      }

      .x-grid3 .x-grid3-row-table > tbody > tr {
        width: 100% !important;
        height: 38px !important;
      }

      .x-tree3-node-joint[style*='-66px'] {
        // Closed
        background: url(_icon("navNext", "grey")) no-repeat top 1px center !important;
        background-size: 12px !important;
      }

      .x-tree3-node-joint[style*='-34px'] {
        // Opened
        background: url(_icon("arrowDown", "grey")) no-repeat top 1px center !important;
        background-size: 16px !important;
      }
    }

    .x-grid3-hd-row {

      .x-grid3-hd {
        border-left-color: _color("primary", c);
        border-right-color: _color("primary", e);
      }

    }
  }

  #workflow-dashboard-publication-window {
    background: unset !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: calc(5%) !important;

    .indigo-modal-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100%;
      z-index: 99;
      background-color: _color("secondary") !important;
      opacity: 0.6;
    }

    .x-window-tl {
      width: 80% !important;
      background: unset !important;
      padding: 0 !important;
      height: 100px !important;
      box-shadow: 0 4px 10px rgba(59, 61, 64, 0.3);
      border: none !important;

      .x-window-tr {
        height: 100px !important;
      }

      .x-window-header {
        width: 100% !important;
        background: _color("secondary") !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;

        .x-window-header-text {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding: 0 16px;
          display: inline !important;
          width: 100% !important;
          background: unset !important;
          line-height: 100px !important;
          text-align: center;
        }
      }
    }


    .x-window-bwrap {
      z-index: 100;
      width: 80% !important;
      height: 80% !important;

      @include _button(".button-comment", "FORM", "remove-icons");
      @include _button(".button-start", "ACTIONBAR---SUGGESTED", "remove-icons");

      background: _color("secondary") !important;

      .x-window-mc {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        height: calc(100%) !important;
      }

      .x-window-body {
        width: 100% !important;
        height: calc(100%) !important;

        .workflow-action-dialog {
          height: calc(100%) !important;

          .x-tab-panel {
            width: 100% !important;
            display: flex;
            flex-direction: row;
            height: calc(100%) !important;
            border: none !important;

            .x-tab-panel-header {
              flex: 0 0 200px !important;
              height: calc(100%) !important;
              border: none !important;
              background-color: unset !important;
              padding-top: 2% !important;

              .x-tab-strip {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                border: none !important;
                background-color: unset !important;

                .x-component {
                  flex: 0 0 50px !important;
                }

                li {
                  // Tab entry
                  float: none;
                  margin-left: 0;
                  display: block;

                  &.x-tab-strip-active {
                    background: _color("tertiary", normal);
                  }

                  .x-tab-right {
                    // Button container
                    background: none;
                    padding: 0;
                    margin: 0;

                    .x-tab-left {
                      // ANother button container
                      background: none;
                      padding: 0;

                      .x-tab-strip-inner {
                        // Yet another button container
                        background: none;
                      }
                    }
                  }
                }


              }

              .x-tab-strip .x-tab-strip-inner {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-content: center;
              }

              ////////// TABS
              .x-tab-strip .x-tab-strip-text {
                // At last the button label !!
                padding: 0 10px 0 0;
                flex: 0 0;
                line-height: 3rem;
                @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
              }

              ////////// TAB OVER
              .x-tab-strip-over {
                background: _color("tertiary", a);

                .x-tab-strip-text {
                  // At last the button label !!
                  @include text(_size("normal"), _theme($TAB--COLOR---HOVER, $EDIT-ENGINE) !important, _weight("light"));
                }
              }

              ////////// TAB SELECTED
              .x-tab-strip-active .x-tab-strip-text {
                // At last the button label !!
                @include text(_size("normal"), _theme($TAB--COLOR---SELECTED, $EDIT-ENGINE) !important, _weight("light"));
              }

              ////////// TAB SELECTED & HOVER
              .x-tab-strip-active.x-tab-strip-over .x-tab-strip-text {
                // At last the button label !!
                @include text(_size("normal"), _theme($TAB--COLOR---SELECTED-HOVER, $EDIT-ENGINE) !important, _weight("light"));
              }
            }

            .x-tab-panel-body {
              height: calc(100%) !important;
              border-top: none !important;
              border-left: 1px solid _color("secondary", d) !important;
              border-bottom: none !important;
              border-right: none !important;
              width: 100% !important;
              padding: 2% !important;

              .workflow-dialog-action-tab.x-border-layout-ct {
                height: calc(100%) !important;
                width: 100% !important;
                display: flex;
                flex-direction: column;
                position: relative !important;

                .x-border-panel:first-child {
                  flex: 0 0 3rem !important;
                  position: relative !important;
                  top: unset !important;
                  left: unset !important;

                  .x-component {
                    line-height: 3rem !important;
                  }

                  td {
                    line-height: 3rem !important;
                    vertical-align: baseline !important;

                    .x-component {
                      @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                      color: _theme($TAB--COLOR, $EDIT-ENGINE) !important;
                    }

                    img {
                      width: 16px !important;
                      height: 100%;
                      object-fit: contain;
                    }
                  }
                }

                .x-border-panel:last-child {
                  flex: 1 1 !important;
                  position: relative !important;
                  width: 100% !important;
                  height: 100% !important;
                  top: unset !important;
                  left: unset !important;

                  .x-panel-bwrap {
                    width: 100% !important;
                    height: 100% !important;

                    fieldset {
                      border: none !important;

                      .x-form-text {
                        @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                        line-height: 2rem !important;
                        background: _color("secondary", d) !important;
                      }

                      .x-form-text:hover {
                        background: _color("secondary") !important;
                      }

                      .x-form-text:focus {
                        background: _color("secondary") !important;
                      }
                    }
                  }
                }
              }

              .workflow-dialog-comments-tab.x-border-layout-ct {
                height: calc(100%) !important;
                width: 100% !important;
                display: flex;
                flex-direction: column-reverse;
                position: relative !important;

                .x-border-panel:first-child {
                  flex: 5 1 2rem !important;
                  position: relative !important;
                  top: unset !important;
                  left: unset !important;
                  margin-top: 10px;

                  table {
                    width: 100% !important;

                    .x-component {
                      width: 100% !important;
                      @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                      line-height: 2rem !important;
                      height: 2rem !important;
                    }

                    tr {
                      display: flex !important;
                      flex-direction: row;
                      width: 100% !important;
                      @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                      line-height: 2rem !important;
                      height: 2rem !important;

                      td {
                        flex: 0 0 50% !important;
                        padding: 0 !important;

                        tbody {
                          display: flex !important;
                          flex-direction: row-reverse;
                          width: 100% !important;
                          @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                          line-height: 2rem !important;
                          height: 2rem !important;

                          tr {
                            flex-grow: 1 !important;

                            td {
                              padding: 0 !important;
                              flex: 0 0 100% !important;
                            }
                          }
                        }
                      }
                    }
                  }

                }

                .x-border-panel:last-child {
                  flex: 1 1 !important;
                  position: relative !important;
                  width: 100% !important;
                  height: 100% !important;
                  top: unset !important;
                  left: unset !important;

                  .x-panel-bwrap {
                    width: 100% !important;
                    height: 100% !important;

                    form {
                      display: flex !important;
                      flex-direction: column !important;
                      justify-content: space-between;
                      height: 11rem !important;
                      align-content: flex-end;
                      align-items: flex-end;

                      .x-form-item {
                        flex: 0 0 8rem !important;
                        width: 100% !important;
                      }

                      .x-form-item-label {
                        @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                        line-height: 2rem !important;
                        height: 2rem !important;
                      }

                      .x-form-textarea {
                        @include text(_size("normal"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                        line-height: 1rem !important;
                        height: 6rem !important;
                        background: _color("secondary", d) !important;
                      }

                      .x-form-textarea:hover {
                        background: _color("secondary") !important;
                      }

                      .x-form-textarea:focus {
                        background: _color("secondary") !important;
                      }
                    }
                  }
                }
              }

              .workflow-dialog-publication-tab {
                height: calc(100%) !important;
                width: 100% !important;
                display: flex;
                flex-direction: column;
                position: relative !important;

                .x-component.x-border {
                  height: 100% !important;
                  width: 100% !important;

                  .x-grid-group {
                    .x-grid-group-hd {
                      border: none;
                      padding: 4px 0;
                      padding-top: 8px;

                      .x-grid-group-div {
                        @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                        padding-left: 11px;
                        background-image: url(../images/icons/icon-toggle-expanded-small-normal.png); /* OPTIMISE URL ::: css/app/workflow/_overrides.scss ::: 1 */
                        background-size: 7px 5px;
                        background-position: left;
                      }
                    }

                    .x-grid-group-body {
                      display: flex !important;
                      flex-direction: column;
                      width: 100% !important;

                      .x-grid3-row {
                        flex: 0 0 100% !important;

                        &.x-grid3-row-over {
                          background: _color("secondary", d) !important
                        }

                        &.x-grid3-row-selected {
                          .x-grid3-cell-inner {
                            color: _color("primary", normal) !important;
                          }
                        }

                        table {
                          width: 100% !important;

                          tr {
                            display: flex;
                            flex-direction: row;
                            width: 100% !important;

                            td {
                              flex-grow: 1;
                            }

                            td:nth-child(4) {
                              flex-grow: 2;
                              width: 100% !important;
                            }
                          }
                        }

                        .x-grid3-col-action {
                          @include _button(".button-compare", "FORM", "remove-icons");
                          @include _button(".button-review", "FORM", "remove-icons");
                        }
                      }
                    }
                  }

                  .x-grid-group-collapsed {
                    .x-grid-group-div {
                      @include text(_size("medium"), _theme($TAB--COLOR, $EDIT-ENGINE), _weight("light"));
                      padding-left: 11px;
                      background-image: url(../images/icons/expand-side-panel@X2.png) !important;
                      background-size: 5px 7px;
                      background-position: left;
                    }


                    .x-grid-group-body {
                      display: none !important;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .x-window-bbar {
        flex-grow: 0;
        flex-basis: 45px !important;
        height: 45px !important;
        width: 100% !important;
        background-color: _color("secondary") !important;

        > .x-panel-fbar {
          height: 36px !important;
          width: 100% !important;
          @include _button(".button-cancel", "ACTIONBAR---SECONDARY", "remove-icons");
          @include _button(".button-noworkflow", "ACTIONBAR---SUGGESTED", "remove-icons");
          @include _button(".button-start", "ACTIONBAR---SUGGESTED", "remove-icons");
          @include _button(".button-bypassworkflow", "ACTIONBAR---SUGGESTED", "remove-icons");
          @include _button(".button-workflow-action", "ACTIONBAR---SUGGESTED", "remove-icons");

          > table {
            width: 100% !important;
            display: block;

            > tbody {
              width: 100% !important;
              display: block;

              > tr {
                width: 100% !important;
                display: flex;
                flex-direction: row-reverse;
                padding-right: 1rem !important;
              }
            }
          }
        }
      }


      .x-window-bbar {
        .x-panel-fbar .x-toolbar-cell {
          padding-bottom: 0 !important;
          float: left;
          margin-left: 5px !important;
        }
      }
    }
  }
}

